<template>
	<view class="box">
		<!-- 导航栏 -->
		<uni-nav-bar right-text="密码登录" title="登录bilibili"></uni-nav-bar>
		<view class="uni-panel">
			<view class="uni-panel-h" :class="isOpen ? 'uni-panel-h-on' : ''" @click="triggerCollapse()">
				<text class="uni-panel-text">中国大陆</text>
				<text class="uni-panel-icon uni-icon" :class="isOpen ? 'uni-panel-icon-on' : ''">&#xe581;</text>
			</view>
			<view class="uni-panel-c" v-if="isOpen">
				<view
					class="uni-navigate-item "
					v-for="(item, index) in districtData"
					:class="selectedIndex === index ? 'active' : ''"
					:key="item.id"
					@click="selected(index, item.id)"
				>
					<text class="uni-navigate-text">{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
export default {
	components: {
		uniNavBar
	},
	data() {
		return {
			isOpen: false,
			selectedIndex: 0, // 默认显示第一个国家
			districtData: [
				{
					id: 1,
					name: '中国大陆'
				},
				{
					id: 2,
					name: '中国香港特别行政区'
				},
				{
					id: 3,
					name: '中国澳门特别行政区'
				},
				{
					id: 4,
					name: '中国台湾'
				},
				{
					id: 5,
					name: '比利时'
				},
				{
					id: 6,
					name: '澳大利亚'
				},
				{
					id: 7,
					name: '法国'
				},
				{
					id: 8,
					name: '加拿大'
				},
				{
					id: 9,
					name: '日本'
				},
				{
					id: 10,
					name: '新加坡'
				},
				{
					id: 11,
					name: '美国'
				}
			]
		};
	},
	methods: {
		triggerCollapse() {
			this.isOpen = !this.isOpen;
		},
		// 国家选择
		selected(index, id) {
			this.selectedIndex = index;
			// 循环遍历
			this.districtData.forEach((item,index) => {
				console.log(item.name)
			})
		}
	}
};
</script>

<style lang="less" scoped>
@import '../../common/uni-nvue.css';
.box {
	background-color: #f3f3f3;
	.uni-panel {
		margin: 40upx auto;
		.uni-panel-h {
			display: flex;
		}
		.uni-panel-c {
			.active {
				background-color: skyblue;
			}
		}
	}
}
</style>
